<template>
<view class="community">
	<view class="head_bg"></view>
	<view class="operating_box" style="margin-top:-180rpx">
		<view class="padding-sm">
			<view class="text-black text-lg">{{info.residential_quarters_name}}</view>
			<view class="padding-top-xs text-grey text-df padding-bottom-sm" style="border-bottom:2rpx dotted #eee;">
				<image class="community_msg_icon" src="../../../common/img/dizhi_hui.png" mode=""></image>
			{{info.residential_quarters_address}}</view>
			<view class="padding-top-sm  text-black text-df">
				<text>终端地址：{{info.equipment_number}}</text>
				<view style="float: right;color:#4DA4FA" @tap="togzsb">
					故障上报
				</view>
			</view>
		</view>
	</view>
	<view v-if="consumption_pattern==0">
		<view class="margin-top-xs padding-sm text-df text-black">选择端口</view>
		<view class="operating_box">
			<view class="flex text-center padding-sm">
				<view class="flex-sub">
					<view class="text-center" @tap="selleftpot" :class="[leftcheck==0?'unsel':'sel']">
						<view v-if="info.left_socket_status==0" class="bjys">空闲</view>
						<view v-else class="bjys">占用</view>
					</view>
					<view class="">1号</view>
				</view>
				<view class="flex-sub">
					<view class="text-center" @tap="selrightpot" :class="[rightcheck==0?'unsel':'sel']">
						<view v-if="info.right_socket_status==0" class="bjys">空闲</view>
						<view v-else class="bjys">占用</view>
					</view>
					<view class="">2号</view>
				</view>
			</view>
		</view>
		<view class="operating_box" style="margin-top: 20rpx;">
			<view class="padding-left-sm padding-right-sm padding-bottom-sm">
				<scroll-view scroll-x class="bg-white nav text-center">
					<view class="flex text-center">
						<view class="cu-item flex-sub" @tap="tabSelect" :data-id="0">
							<text :class="TabCur==0?'cur border-bottom':''">按时收费</text>
						</view>
						<view class="cu-item flex-sub" @tap="tabSelect" :data-id="1">
							<text :class="TabCur==1?'cur border-bottom':''">按量收费</text>
						</view>
					</view>
				</scroll-view>
				<block v-if="TabCur==0">
					<view class="text-center padding-top-sm padding-bottom-sm solid-bottom">
						<view class='cu-tag round tag-pad' @tap="jeSelect(0,1,1)"
						 :class="index==0?'checkTime':''">1元1小时</view>
						<view class='cu-tag round tag-pad tag-mar' @tap="jeSelect(1,2,4)"
						:class="index==1?'checkTime':''">2元4小时</view>
						<view class='cu-tag round tag-pad tag-mar' @tap="jeSelect(2,3,6)"
						 :class="index==2?'checkTime':''">3元6小时</view>
					</view>
				</block>
				<block v-if="TabCur==1">
					<view class="text-center padding-top-sm padding-bottom-sm solid-bottom">
						<view class='cu-tag round mon-pad' @tap="jeSelect(3,1,'')"
						 :class="index==3?'checkTime':''">1元</view>
						<view class='cu-tag round mon-pad tag-mar' @tap="jeSelect(4,3,'')"
						:class="index==4?'checkTime':''">3元</view>
						<view class='cu-tag round mon-pad tag-mar' @tap="jeSelect(5,5,'')"
						 :class="index==5?'checkTime':''">5元</view>
					</view>
				</block>
				<view class="padding-top-sm" >
					<text>充电瓦数：500瓦以下</text>
					<text @tap="showModal" data-target="bottomModal" style="float:right">注意事项及提示
					<text class="cuIcon-info margin-left-sm margin-right-sm"></text>
					</text>
				</view>
			</view>
		</view>
		<view v-if="packlist && packlist.length>0" class="margin-top-xs padding-sm text-df text-black">优惠套餐
		<text @click="toMorePackage" style="float: right;" class="text-red">更多<text class="cuIcon-right"></text></text>
		</view>
		<view class="flex padding-left-sm padding-right-sm" >
			<view class="flex-sub operating_box" v-if="packlist[0]" style="height: 200rpx;margin-right:30rpx;">
				<view class="padding-sm">
					<view class="pack-name text-gray">{{packlist[0].package_name}}</view>
					<view class="padding-left-xs text-xl" style="line-height:0.6;">{{packlist[0].package_price}}元</view>
				</view>
			</view>
			<view class="flex-sub operating_box" v-if="packlist[1]" style="height: 200rpx;">
				<view class="padding-sm">
					<view class="pack-name text-gray">{{packlist[1].package_name}}</view>
					<view class="padding-left-xs text-xl" style="line-height:0.6;">{{packlist[1].package_price}}元</view>
				</view>
			</view>
		</view>
		<view class="margin-top-xs padding-sm text-df text-black">支付方式</view>
		<view class="operating_box">
			<view class="padding-xs">
				<radio-group class="block" @change="RadioChange">
					<view class="cu-form-group">
						<view class="title">
							<image src="../../../common/img/shebei_nianfei.png" style="width: 55rpx;height: 55rpx;vertical-align: middle;"></image>
							我的余额：{{info.balance}}元
						</view>
						<view @tap="torecharge">
							<button class="cu-btn bg-blue" style="padding:18rpx">余额充值</button>
						</view>
						<radio :class="consumption_pattern=='0'?'checked':''" :checked="consumption_pattern=='0'?true:false" value="0"></radio>
					</view>
					<!-- <view class="cu-form-group">
						<view class="title padding-left-xs">
							<image src="../../../common/img/weixin_zhifu.png" style="width: 35rpx;height: 35rpx;vertical-align: middle;"></image>
							<text class="padding-left-xs">微信</text>
						</view>
						<radio :class="radio=='A'?'checked':''" :checked="radio=='A'?true:false" value="A"></radio>
					</view> -->
					<view class="cu-form-group">
						<view class="title">
							<image src="../../../common/img/taocan.png" style="width: 55rpx;height: 55rpx;vertical-align: middle;"></image>
							套餐
						</view>
						<radio :class="consumption_pattern=='1'?'checked':''" :checked="consumption_pattern=='1'?true:false" value="1"></radio>
					</view>
				</radio-group>
			</view>
		</view>
	</view>
	<view v-if="consumption_pattern==1">
		<view class="margin-top-xs padding-sm text-df text-black">当前可用功率：350瓦以下</view>
		<view class="package" @click="checkPackage(item,index)" :class="check==index?'checkNum':''" v-for="(item,index) in useList" :key="index">
			<view class="flex">
				<view class="flex-sub">
					<view class="time_name text-white">{{item.package_name}}</view>
					<view class="text-white time_mon">¥<text>{{item.package_price}}</text></view>
				</view>
				<view class="flex-sub">
					<view class="text-white">
						<text class="time_time">{{item.Begin_time}} 至 {{item.end_time}}</text>
					</view>
				</view>
			</view>
			<view class="operating_box_inner" style="padding-top:25rpx;">
				<view class="money_details_inner money_details_inner1">
					<view class="money_details_number time_add_color">{{item.user_num}}</view>
					<view class="money_details_text time_add_color">总充电(次)</view>
				</view>
				<view class="detail_br" style="border-left: 1rpx solid #EDEDED;position: relative;top: 25rpx;"></view>
				<view class="money_details_inner money_details_inner1">
					<view class="money_details_number time_add_color">{{item.charging_time}}</view>
					<view class="money_details_text time_add_color">每次充电（小时）</view>
				</view>
				<view class="detail_br" style="border-left: 1rpx solid #EDEDED;position: relative;top: 25rpx;"></view>
				<view class="money_details_inner money_details_inner1">
					<view class="money_details_number time_add_color">{{item.surplus_num}}</view>
					<view class="money_details_text time_add_color">剩余（次）</view>
				</view>
			</view>
		</view>
	</view>
	<view style="height:250rpx;"></view>
	<view class="foot">
	   <button type="button" class="cu-btn block bg-blue lg" @tap="toF()">开始充电</button>
	</view>
	<view class="cu-modal bottom-modal" :class="modalName=='bottomModal'?'show':''">
		<view class="cu-dialog bg-white padding-bottom-sm" style="border-radius: 20px 20px 0 0;">
			<view class="padding-lg">
				<text class="text-lg text-black" style="float:left">注意事项及提示</text>
				<text class="text-right" @tap="hideModal">
					<text class="cuIcon-close text-grey"></text>
				</text>
			</view>
			<view class="padding-left-lg padding-top-lg text-black showmsg">
				收费标准:</view>
			<view class="text-gray showmsg text-show-padd">
				电池充满活着被中断，剩余金额将不会退还</view>
			<view class="padding-left-lg padding-top-xs text-black showmsg">
				注意事项:</view>
			<view class="text-gray showmsg text-show-padd">
				大功率电瓶车按时收费可能被拒充，建议使用按量收费。凡因充电器引发的问题，造成的后果将由车主自行承担。</view>
			<view class="padding-left-lg padding-top-xs text-black showmsg">
				特别提示:</view>
			<view class="text-gray showmsg text-show-padd">
				如充电器功率过载，充电达到12小时，充电被拔等。有可能导致电池不能充满，请自己根据实际情况予以判断。</view>
		</view>
	</view>
</view>
</template>

<script>
	import { pathToBase64, base64ToPath } from '../../../components/js_sdk/gsq-image-tools/image-tools/index.js'
	export default {
		data() {
			return {
				leftcheck:0,//左边是否选中
				rightcheck:0,//右边是否选中
				port:'',//端口
				je:0,//消费金额
				sc:0,//充电时长
				TabCur:0,
				index:-1,
				info:'',
				balance:0.00,
				src:'',
				scode:'',
				aslist:[],//按时收费
				allist:[],//按量收费
				adflist:[],//按电费收费
				modalName: null,
				packlist:[],
				money:0,
				consumption_pattern:0,
				useList:[],
				num:"",//套餐编码
				check:-1
			}
		},
		onLoad(options){
			if(options.dinfo){
				let oinfo = JSON.parse(options.dinfo);
				this.info = oinfo;
				this.aslist=oinfo.ontime_free;
				this.allist=oinfo.amount_free;
				this.adflist=oinfo.electricity_free;
			}
			// this.scode = options.scode
			// this.getdata();
			// this.info = JSON.parse(options.dinfo);
			// uni.showToast({
			// 	icon: '获取设备信息:'+options.info,
			// 	title: '获取设备信息'
			// });
			// this.dinfo=info;
			// this.aslist=info.ontime_free;
			// this.allist=info.amount_free;
			// this.adflist=info.electricity_free;
		},
		onShow() {
			this.getdata();
			this.getUseList();
			// let openid = uni.getStorageSync("openid");
			// if(openid){
			//     this.ischaring();
			// }else{
			// 	this.getwxinfo() 
			// }
		},
		methods: {
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			//判断是否正在充电
			ischaring(){
				let that=this;
				that.http.tokenreq({
					url: 'user/v1/chargingstatus',
				}).then((res) => {
					let e=res.data;
					uni.showModal({
						content: JSON.stringify(res.data),
						showCancel:false,
						success: function (res) {
							if (res.confirm) {
								
							}
						}
					});
					if(e.code==0 && e.success){
						uni.navigateTo({
							url: '/pages/user/charging/chargingnow'
						})
						return;
					}else{
						uni.showToast({
							icon: 'none',
							title: '获取设备信息'
						});
						that.getdata();
					}
				})
			},
			getdata(){
				let that = this;
				that.http.tokenreq({
					url: 'user/v1/getdinfo',
					data: {
						"equipment_number": '2',
					}
				}).then((res) => {
					let e = res.data;
					uni.showToast({
						icon: 'none',
						title: e
					});
					
					if (e.code == 0 && e.success) {
						let dinfo=e.data;
						this.info = dinfo;
						that.aslist=dinfo.ontime_free;
						that.allist=dinfo.amount_free;
						that.adflist=dinfo.electricity_free;
						that.getPackageList();
					} else {
						uni.showToast({
							icon: 'none',
							title: e.message
						});
						setTimeout(()=>{
							uni.navigateTo({
								url: "/pages/user/my/my"
							})
						},2000)
					}
				})
			},
			getPackageList(){
				let that = this;
				that.http.tokenreq({
					url: 'User/v1/villagesetmeal',
					data: {
						"residential_quarters_guid": that.info.residential_quarters_guid,
					}
				}).then((res) => {
					let e = res.data;
					if (e.code == 0 && e.success) {
						that.packlist = e.rows;
						console.log(JSON.stringify(that.packlist))
					} else {
						uni.showToast({
							icon: 'none',
							title: e.message
						});
					}
				})
			},
			getUseList(){
				let that = this;
				that.http.tokenreq({
					url: 'user/v1/paymymeal'
				}).then((res) => {
					let e = res.data;
					if (e.code == 0 && e.success) {
						that.useList = e.rows;
					} else {
						uni.showToast({
							icon: 'none',
							title: e.message
						});
					}
				})
			},
			getWeiXin() {
				//跳转
				window.location.href = 'http://evcssappapi.yushengkeji.cn/user/v1/getweixincode'
			},
			getwxinfo() {
				let openid = uni.getStorageSync("openid");
				if (openid) {
					let that = this;
					that.http.postJSON({
						url: 'user/v1/login',
						data: {
							"openid": openid,
						}
					}).then((res) => {
						// uni.showToast({
						// 	title:'res='+JSON.stringify(res),
						// 	icon:'none'
						// })
						if (res.data.code == 0 && res.data.success == true) {
							uni.showToast({
								title: '登录成功!',
								icon: 'none'
							})
							uni.setStorageSync("token", res.data.data.token);
							this.menuauthority = res.data.data.menuauthority
							uni.setStorageSync("menuauthority", this.menuauthority);
						} else {
							this.getWeiXin();
						}
					})
				} else {
					this.getWeiXin();
				}
			},
			tabSelect(e) {
				this.TabCur = e.currentTarget.dataset.id;
			},
			//选择端口
			selleftpot(){
				let info=this.info;
				if(info.left_socket_status==1){
					reurn;
				}
				if(this.leftcheck==0){
					this.leftcheck=1;
				}
				if(this.rightcheck==1){
					this.rightcheck=0;
				}
				this.port="0";
				console.log("port=="+this.port);
			},	
			selrightpot(){
				let info=this.info;
				if(info.right_socket_status==1){
					reurn;
				}
				if(this.leftcheck==1){
					this.leftcheck=0;
				}
				if(this.rightcheck==0){
					this.rightcheck=1;
				}
				this.port="1";
			},	
			jeSelect(index,je,sc) {
				this.index = index;
				this.je=je;
				this.sc=sc;
				// if(this.TabCur==0){
				// 	this.sc=e.currentTarget.dataset.sc;
				// }else{
				// 	this.sc="0";
				// }
			},
			toMorePackage(){
				uni.navigateTo({
					url:"/pages/user/package/packagelist?info="+JSON.stringify((this.info))
				})
			},
			
			//故障上报
			togzsb(){
				uni.navigateTo({
					url:'/pages/user/pay/declare?item='+JSON.stringify(this.info)
				})
			},
			//余额充值
			torecharge(){
				uni.navigateTo({
					url: '/pages/user/recharge/recharge?balance='+this.balance
				})
			},
			RadioChange(e) {
				this.consumption_pattern = e.detail.value
			},
			checkPackage(item,index){
				this.check=index;
				this.num=item.set_meal_guid
			},
			//开始充电
			toF(){
				if(this.port=='' || this.port==null){
					uni.showToast({
						icon: 'none',
					    title: '请选择充电端口'
					});
					return;
				}
				if(this.je=='' || this.je==null){
					uni.showToast({
						icon: 'none',
					    title: '请选择充电金额'
					});
					return;
				}
				if(this.consumption_pattern==1 && !this.num){
					uni.showToast({
						icon: 'none',
					    title: '请选择套餐开始充电'
					});
					return;
				}
				let that=this;
				
				that.http.tokenreq({
					url: 'user/v1/charging',
					data: {
						"equipment_number":this.info.equipment_number,//设备编号
						"charging_method":this.TabCur,//收费方式 0 按时 1按量 2 按电费
						"consumption_pattern":this.consumption_pattern,//消费模式 0 余额 1套餐
						"frozen_amount":this.je,
						"consumption_code":this.num,
						"charging_minutes":this.sc,//充电时间如果是按时充电 传 充电时间
						"socket_port":this.port,//socket_port充电端口	0 左 1右
						"is_white":this.info.is_white
					}
				}).then((res) => {
					// uni.showModal({
					// 	content: this.info.equipment_number+","+this.TabCur+","+this.je+","+this.sc+","+this.port,
					// 	showCancel:false,
					// 	success: function (res) {
					// 		if (res.confirm) {
								
					// 		}
					// 	}
					// });
					let e=res.data;
					console.log("eee="+JSON.stringify(e));
					if(e.code==0 && e.success){
						uni.showModal({
							content: e.message,
							showCancel:false,
							success: function (res) {
								if (res.confirm) {
									uni.navigateTo({
										url: '/pages/user/charging/chargingnow'
									})
								}
							}
						});
					}else{
						uni.showToast({
							icon: 'none',
						    title: e.message
						});
					}
				})
			}
		}
	}
</script>

<style>
	
	.operating_box{
		padding-bottom:0px;
	}
	.foot{
		position: fixed;
		left: 0;
		bottom: 0;
		width:100%;
	}
	.cu-btn[data-v-05cde6f6] {
		padding: 0;
	    /* padding: 27px 16px; */
	}
	/* .head_bg{
		height:150rpx;
	} */
	/* .nav .cu-item{
		height:120rpx;
		line-height:60rpx;
		padding:10rpx 20rpx;
	} */
	.txzys{
		background-color:#0081FF;
		color: white;
		border:1rpx solid #FFFFFF;
	}
	.cu-btn{
		padding:50rpx 30rpx; 
	}
	.alys{
		padding:50rpx 80rpx; 
	}
	.unsel{
		background-image: url(../../../common/img/unseldk.png);
		background-repeat: no-repeat;
		background-position: center;
		/* width: 150rpx; */
		height: 150rpx;
	}
	.sel{
		background-image: url(../../../common/img/seldk.png);
		background-repeat: no-repeat;
		background-position: center;
		/* width: 150rpx; */
		height: 150rpx;
	}
	.bjys{
		padding-top:105rpx;
		padding-left:40rpx;
		font-size:26rpx;
	}
	.border-bottom{
		border-bottom:5rpx solid #249FFB;
		color:#249FFB;
		padding-bottom:5px
	}
	.tag-pad{
		padding:10rpx 40rpx;
		color:gray;
	}
	.tag-mar{
		margin-left:40rpx
	}
	.text-right{
		float:right;
		margin-right:20rpx
	}
	.showmsg{
		clear:both;
		text-align:left
	}
	.text-show-padd{
		padding-left:80rpx;
	}
	.package-check{
		background-image: url(../../../common/img/qianggou.png);
		background-size:100% 100%;
		width:100%;
		height: 250rpx;
	}
	.pack-name{
		padding:40rpx 0 10rpx 10rpx;
	}
	.checkTime{
		border: 2rpx solid #EFAD94;
		color: #EFAD94;
		background-color: #FEF5F0;
	}
	.cu-form-group{
		/* min-height: 90rpx; */
		padding: 0 10rpx;
	}
	.mon-pad{
		padding:10rpx 70rpx;
		color:gray;
	}
	.package{
		background-image: url(../../../common/img/ka2.png);
		background-size: 100% 100%;
		width: 100%;
		height: 350rpx;
	}
	.time_name{
		padding: 30rpx 0 0rpx 40rpx;
		font-size: 30rpx;
	}
	.time_mon{
		padding: 0 0 0 40rpx;
		font-size: 40rpx;
	}
	.time_time{
		padding: 0rpx 0rpx 0 30rpx;
	}
	.time_add{
		padding: 0rpx 30rpx 0 0;
	}
	.time_add_color{
		color:#8C6B22
	}
	.time_black{
		color: #666666 !important;
	}
	.checkNum{
		border:5rpx solid orange;
		border-radius: 10rpx;
	}
</style>
